﻿<%@ Page Language="C#" MasterPageFile="~/UserControl_Manager/MasterPage_Manager.Master"
    AutoEventWireup="true" CodeBehind="RevenueReport.aspx.cs" Inherits="TMDT_Nhom1A.Manager.RevenueReport"
    Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <script type="text/javascript"> 
		
		    var firstSeries='<%= SeriesData %>';  
            var secondSeries = '<%= SeriesData_2 %>'
            var thirdSeries = '<%= SeriesData_3 %>'
            var yearXDataSeries = '<%= YearlyXData %>>'
            
		    var seriesOne = new Array();  		    
            seriesOne= firstSeries.split(',');  
            for(var i=0;i<seriesOne.length;i++)  
            {  
                seriesOne[i]= parseInt(seriesOne[i]);  
            } 
            
            var seriesTwo = new Array();  
            seriesTwo= secondSeries.split(',');  
            for(var i=0;i<seriesTwo.length;i++)  
            {  
                seriesTwo[i]= parseInt(seriesTwo[i]);  
            } 
            
            var seriesThree = new Array();  
            seriesThree= thirdSeries.split(',');  
            for(var i=0;i<seriesThree.length;i++)  
            {  
                seriesThree[i]= parseInt(seriesThree[i]);  
            } 
            
            var yearXData = new Array();  
            yearXData= yearXDataSeries.split(',');  
            for(var i=0;i<yearXData.length;i++)  
            {  
                yearXData[i]= parseInt(yearXData[i]);  
            } 
            
            var _monthlyRevenueData = seriesOne;
            var _quaterRevenueData =  seriesTwo;
            var _yearlyRevenueData = seriesThree;
            var _yearlyXData = yearXData;
            
			var chart;
			
			function DrawChartforMonthlyRevenueReport()
			{
			    chart = new Highcharts.Chart({
					chart: {
						renderTo: 'monthly_container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Doanh Thu Theo Từng Tháng'
					},
					xAxis: {
						categories: [
							'Tháng 1', 
							'Tháng 2', 
							'Tháng 3', 
							'Tháng 4', 
							'Tháng 5',
							'Tháng 6',
							'Tháng 7',
							'Tháng 8',
							'Tháng 9',
							'Tháng 10',
							'Tháng 11',
							'Tháng 12',
							
						] ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _monthlyRevenueData,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};
			
			
			
            var chart_2;
			function DrawChartforQuaterRevenueReport() {
				chart_2 = new Highcharts.Chart({
					chart: {
						renderTo: 'quater_container',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Biểu Đồ Doanh Thu Theo Quý'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1) +' VND';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Doanh Thu',
						data: [
							['Quý 1',   _quaterRevenueData[0]],
							['Quý 2',   _quaterRevenueData[1]],
							['Quý 3',   _quaterRevenueData[2]],
							['Quý 4',   _quaterRevenueData[3]],
							
						]
					}]
				});
				$('tspan').last().remove();
			};
			
			var chart3;		
			function DrawChartforYearlyRevenueReport()
			{
			    chart3 = new Highcharts.Chart({
					chart: {
						renderTo: 'yearly_container',
						defaultSeriesType: 'column',
						margin: [ 50, 50, 100, 80]
					},
					title: {
						text: 'Doanh Thu Theo Từng Năm'
					},
					xAxis: {
						categories: _yearlyXData ,
						labels: {
							rotation: -45,
							align: 'right',
							style: {
								 font: 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Doanh Thu'
						}
					},
					legend: {
						enabled: false
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.x +'</b><br/>'+
								 'doanh thu: '+ Highcharts.numberFormat(this.y, 1) + ' VND' ;
								 
						}
					},
				        series: [{
						name: 'Doanh Thu',
						data: _yearlyRevenueData,
						dataLabels: {
							enabled: true,
							rotation: -90,
							color: '#FFFFFF',
							align: 'right',
							x: -3,
							y: 10,
							formatter: function() {
								return this.y;
							},
							style: {
								font: 'normal 13px Verdana, sans-serif'
							}
						}			
					}]
				});
				
				$('tspan').last().remove();
			};

				
    </script>

    <div class="module_round_box_inner">
        <div class="module_round_box_inner2">
            <div class="s5_mod_h3_1">
                <div class="s5_mod_h3_2">
                    <h3 class="s5_mod_h3">
                        <span class="s5_h3_first">Báo Cáo Doanh Thu</span>
                    </h3>
                </div>
            </div>
            <br />
            <input type="button" class="button" id="btMonthlyRevenueClick" value="Xuất biểu đồ báo cáo doanh thu theo tháng"
                onclick="DrawChartforMonthlyRevenueReport();" style="cursor: pointer;" />
            <br />
            <br />
            <div id="monthly_container" style="width: 680px; height: 400px; margin: 0 auto">
            </div>
            <br />
            <input type="button" class="button" id="idQuaterRevenueClick" value="Xuất biểu đồ báo cáo doanh thu theo quý"
                onclick="DrawChartforQuaterRevenueReport();" style="cursor: pointer;" />
            <br />
            <br />
            <div id="quater_container" style="width: 680px; height: 400px; margin: 0 auto">
            </div>
            <br />
            <input type="button" class="button" id="idYearkyRevenue" value="Xuất biểu đồ báo cáo doanh thu theo năm"
                onclick="DrawChartforYearlyRevenueReport();" style="cursor: pointer;" />
            <br />
            <br />
            <div id="yearly_container" style="width: 680px; height: 400px; margin: 0 auto">
            </div>
        </div>
    </div>
</asp:Content>
